<template>
  <input
    type="text"
    v-model="todoTitle"
    @keyup.enter="addTodo"
    placeholder="请输入任务标题"
  />
  <button @click="addTodo">新增任务</button>
  <hr />
  <h2>
    任务列表&emsp;<span>还有{{ activeLen }}项未完成</span>
  </h2>
  <ul v-if="todoLists.length !== 0">
    <li v-for="item in filterTodoListRef" :key="item.id">
      <input
        @focus="editorTodo(item)"
        @keyup.esc="cancelEditor(item)"
        type="text"
        v-model="item.title"
      />
      <input type="checkbox" v-model="item.completed" />
      <a href="javascript:void(0)" @click="delTodo(item)">删除</a>
    </li>
  </ul>
  <hr />
  <a href="#/all" :class="{ active: visibility === 'all' }">all</a>
  <a href="#/active" :class="{ active: visibility === 'active' }">active</a>
  <a href="#/completed" :class="{ active: visibility === 'completed' }"
    >completed</a
  >
  <input
    id="selectAll"
    type="checkbox"
    v-model="setAllCompleted"
  />
  <label for="selectAll">{{
    activeLen === 0 ? "全部未完成" : "全部完成"
  }}</label>
  <button v-show="completedLen !== 0" @click="clearAllCompleted">清除已完成的</button>
</template>
<script>
import todoList from "./components/todoLists";
import addTodo from "./components/newTodo";
import filterTodo from "./components/filterTodo";
import editorTodo from "./components/editorTodo";
import removeTodo from './components/removeTodo'
export default {
  setup() {
    let { todoLists } = todoList();
    return {
      todoLists,
      ...addTodo(todoLists),
      ...filterTodo(todoLists),
      ...editorTodo(todoLists),
      ...removeTodo(todoLists)
    };
  },
};
</script>
<style scoped>
a {
  color: #000000;
  text-decoration: none;
  margin: 10px;
}
a:hover {
  color: #f40;
}
a.active {
  color: #f40;
}
</style>